<template>
	<view class="pagesDetection ">
		<view class='thematicIconBox' v-if='isThematic'>
			<view class='closeBox' @click="closeThematicActivity">
				<u-icon color="red" name="close-circle"  bold></u-icon>
			</view>
			<u--image @click="goThematicActivity" src="/static/images/index/thematicIcon.png" width="260rpx"
				height="160rpx"></u--image>
		</view>
		<scrollArticle v-if="scrollArticleShow"  @closeScrollArticle='closeScrollArticle'  codeId="projectDetection"></scrollArticle>
		<searchBox currentCode='pagesDetection' @handleSearch='handleSearch'></searchBox>
		<view class="content" v-if="testPackageArr.length>0">
			<view class="cardItem" v-for="(item, index) in testPackageArr" :key="index">
				<view class="first">
					<view class="cardItemImage">
						<u--image :src="item.declarationImageUrl" width="200rpx" height="200rpx"
							@click="click"></u--image>
					</view>
					<view class="firstRight">
						<view class="">
							<text class="name">{{item.name}}</text>
						</view>
						<view>
							<text class="profession">{{item.institutionName}}</text>
						</view>
						<view class="good decoration">
							<view class="mr">
								原价:
							</view>
							<text class="applyPrice1">{{item.price}}</text>
							<text class="unit">元/次</text>
						</view>
						<view class="good">
							<view class="mr">
								优惠价:
							</view>
							<text class="applyPrice">{{item.endPrice?item.endPrice:'免费'}}</text>
							<text class="unit" v-if="item.endPrice">元/次</text>
						</view>
					</view>
				</view>
				<view class="testBox">
					<view class="testTitle">
						检测项目:
					</view>

					<view class="testItem" v-for="(obj, idx) in item.doctorAdvicesInfos" :key="obj.id">
						<text>{{ obj.name }}({{ obj.cost }}元)</text>
						<text v-if="item.doctorAdvicesInfos && item.doctorAdvicesInfos.length - 1 != idx">、</text>

					</view>
				</view>
				<view class="btnBox">
					<view class="btn2">
						<u-button @click="goApply(item)" type="primary" size="mini">我要申请</u-button>
					</view>
				</view>

			</view>
		</view>
		<pagesNoData v-else></pagesNoData>
	</view>
</template>

<script>
	import scrollArticle from '@/components/scrollArticle/scrollArticle.vue'
	import {
		getInstitutionServices
	} from '@/api/platform/InstitutionServices.js'
	export default {
		name: "pagesDetection",
		components:{
			scrollArticle
		},
		data() {
			return {
				scrollArticleShow:true,
				query: {
					name: '',
					typeOfConsultation: 2
				},
				testPackageArr: [],
				isThematic:true,
			};
		},
		mounted() {
			this.getInstitutionServices()
		},
		methods: {
			closeScrollArticle(){
				this.scrollArticleShow=false
			},
			closeThematicActivity(){
				this.isThematic=false
			},
			goThematicActivity() {
				uni.navigateTo({
					url: `/subPackages/service/thematicActivity/thematicActivity`
				})
			},
			handleSearch(data) {
				this.query = data
				this.query.typeOfConsultation= 2
				this.testPackageArr = []
				this.getInstitutionServices()
			},
			goApply(item) {
				let data = {
					type: "2", //项目检测申请
					project: [item],
					...item
				}
				this.$store.commit('setConsultaServiceObj', data)
				uni.navigateTo({
					url: `/subPackages/appointment/notice/notice?orgtype=${2}`
				})
			},
			getInstitutionServices() {
				getInstitutionServices(this.query).then(res => {
					if (res.code == 200) {
						this.testPackageArr = res.data
					}
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.pagesDetection {
		.thematicIconBox {
			display: inline-block;
			position: fixed;
			right: 10rpx;
			bottom: 60rpx;
			z-index: 999;
			.closeBox{
				position: absolute;
				left: 0;
				z-index: 9999;
				width: 40rpx;
				height: 40rpx;
			}
		}
		
		.searchBox {
			::v-deep .u-form-item__body {
				padding: 5rpx 0 !important;
			}
		}

		.content {
			.cardItem {
				margin: 24rpx 16rpx;
				padding: 16rpx;
				box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.3);
				border-radius: 8px;
				.first {
					display: flex;
					.cardItemImage {
						width: 200rpx;
						height: 200rpx;
						border-radius: 4px;
						.cardItemImage_img {
							width: 100%;
							height: 100%;
							display: block;
						}
					}
					.firstRight {
						width: calc(100% - 240rpx);
						margin-left: 24rpx;
						.name {
							font-weight: bold;
							font-size: 32rpx;
							line-height: 52rpx;
							color: #3D3D3D;
							margin-right: 28rpx;
						}
						.sex {
							font-size: 24rpx;
							color: #3D3D3D;
							margin-right: 14rpx;
						}
						.profession {
							font-size: 24rpx;
							color: #156DCB;
							line-height: 40rpx;
							margin-right: 14rpx;
						}
						.good {
							display: flex;
							flex-wrap: wrap;
							font-size: 24rpx;
							line-height: 40rpx;
							color: #3D3D3D;
							.mr {
								margin-right: 14rpx;
							}
							.great {
								color: #BCBCBC;
								font-weight: normal;
								margin-left: 14rpx;
							}
							.applyPrice {
								font-weight: bold;
								font-size: 36rpx;
								color: #FF5709;
								margin-right: 14rpx;
							}
							.applyPrice1 {
								font-size: 30rpx;
								margin-right: 14rpx;
							}
							.unit {
								font-weight: normal;
							}
							.tagItem {
								margin-right: 20rpx;
								margin-bottom: 10rpx;
							}
						}
						.decoration {
							text-decoration: line-through;
							text-decoration-color: #FF4800;
						}
					}
				}
				.testBox {
					display: flex;
					flex-wrap: wrap;
					font-size:26rpx;
					margin-top:10rpx;
					line-height: 40rpx;
					.testTitle {
						margin-right:8rpx;
						font-weight: bold;
					
					}
					
					.testItem {
						color: #979797;
						font-weight:400;
					}
				}
				.btnBox {
					display: flex;
					justify-content: flex-end;
					.btn2 {
						// width: 144rpx;
					}
				}

			}

		}
	}
</style>